<template>
  <div>
    <el-button type="primary" @click="itemShow=true">新增按钮</el-button>
<!--    列表页-->
  <el-table
    :data="cates"
    height="600"
    style="width: 100%; margin-top: 20px">
    <el-table-column
      prop="name"
      label="商品名称">
    </el-table-column>
    <el-table-column
      prop="icon"
      label="分类图标">
      <template slot-scope="scope">
        <div>
          <img :src="scope.row.icon">
        </div>

      </template>
    </el-table-column>
<!--    动态的书渲染-->
<!--    结合文档好好看看  -->
    <el-table-column
      prop="onOff"
      label="启用状态">
      <template slot-scope="scope">
        <el-tag :color="scope.row.onOff?'green':'#f56c6c'">
          {{scope.row.onOff?'启动':'禁用'}}
        </el-tag>
      </template>
    </el-table-column>

    <el-table-column
      label="操作">
      <template slot-scope="scope">
      <el-button size="mini"type="primary" @click="Revise(scope.row.id)">编辑</el-button>
        <el-button size="mini"type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <!--    列表页-->
    <el-pagination
      background
      layout="prev, pager, next,jumper,sizes"
      :current-page="current"
      :page-size="pageSize"
      @size-change="sizeChange"
      @current-change="currentChange"
      :total="total">
    </el-pagination>
    <!--    列表页-->
    <!--    新增表单抽屉-->
    <el-drawer
      title="新增商品"
      :visible.sync="itemShow"
      :direction="direction"
      >
      <Add :allcates="allcates" @componenMint="componenMint"/>
<!--      @componenMint触发了组件通信-->
    </el-drawer>
<!--    修改商品分类-->
    <el-drawer
      title="修改商品分类"
      :visible.sync="itemShow1"
      :direction="direction"
    >
      <unpdate :cate="cate" @hideupdate="hideupdate"/>
      <!--      @componenMint触发了组件通信-->
    </el-drawer>
    <!--    修改商品分类-->

  </div>
</template>
<script>
import {getList,Edit,del} from '@/api'
import Add from '@/views/cate/component/Add'
import unpdate from '@/views/cate/component/unpdate'
import { MessageBox ,Message} from 'element-ui';
export default {
  name: "cate.vue",
  components:{
    Add,
    unpdate
},
  data() {
    return {
      allcates:[],//新增获取全部数据
      cates:[],//列表数据
      current:1,//当前分页
      pageSize:10,//分页一页多少条
      total:0,//总条数 //后端返回的
      itemShow:false,//增加抽屉得显示显示消失
      direction:'rtl',//抽屉方向
      cateid:-1,//点击要修改商品分类的id
      itemShow1:false,//控制编辑抽屉的开关
      cate:{},//商品详情发送给更新默认商品详情

    }
  },
  methods:{
    del(id){
      //删除商品之前弹出确定框
      MessageBox.confirm('此操作将永久删删除该分类，是否执行？','提示',{
        callback:action => {
          if (action==='confirm'){
            //点击确认按钮执行删除
            del(id).then(res=>{
              console.log(res)
              // debugger
              if(res.data.code===200){

                // 删除成功
                Message({
                  type:'success',
                  message:res.data.msg,
                  onClose:()=>{
                    关闭后刷新页面
                    this.$route.go(0)
                  }
                })
              }else {
                Message({
                  type:'error',
                  message:res.data.msg
                })
              }
            })
          }
        }
      })
    },
    Revise(id){
      //点击编辑商品分类案例
      //控制抽屉方法
      this.itemShow1=true
      //编辑商品接口
      Edit({
        id
      }).then(res=>{
        if(res.data.code===200){
          this.cate=res.data.data
        }
      })
    },
    hideupdate(){
      //关闭修改商品分类的数据
      //控制抽屉方法
      this.itemShow1=false
    },
    componenMint(){
      // 抽屉添加后关闭
      //控制抽屉方法
      this.itemShow = false
    },
    currentChange(current){
      this.current=current
      this.getList()
    },
    sizeChange(pageSize){
      //改变分页时触发
   this.pageSize=pageSize
      //重新发送请求
      this.getList()
    },
    getList(){
      // 发送商品请求
      getList(
        {
          page:this.current,
          pageSize:this.pageSize
        }
      ).then(res=>{
      if (res.data.code===200){
        this.cates=res.data.data.lists
        this.total=res.data.data.total//前端总条数
      }
      })
    },
    //传给增加商品分类
    AllgetList(){
      getList().then(res=>{
        if (res.data.code===200){
          this.allcates=res.data.data.lists
        }
      })
    }
  },
  created () {
    //请求接口封装后调用
  this.getList(),//商品列表请求
    this.AllgetList()//商品列表请求
  },
}
</script>

<style lang="scss" scoped>

</style>
